{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static '/css/index_dh.css' %}">
    <link rel="stylesheet" href="{% static '/css/index.css' %}">
    <link rel="stylesheet" href="{% static '/css/index_lbt.css' %}">
{% endblock %}
{% block content %}
    <h1>Ciallo～(∠・ω・ )⌒☆</h1>
    <div>
        <div class="carousel">
        <!-- 轮播图图片 -->
        <div class="carousel-inner" style="display: flex; overflow-x: hidden; scroll-snap-type: x mandatory;">
            <!-- 图片标签，注意添加了scroll-snap-points-x -->
            <img src="{% static '/picture/lbt1.jpg' %}" alt="Image 1" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="/article/1/read">
            <img src="{% static '/picture/lbt2.jpg' %}" alt="Image 2" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="/article/1/read">
            <img src="{% static '/picture/lbt3.jpg' %}" alt="Image 3" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="/article/1/read">
        </div>
        <!-- 轮播图指示器 -->
        <div class="carousel-indicators">
            <span class="carousel-indicator active"></span>
            <span class="carousel-indicator"></span>
            <span class="carousel-indicator"></span>
        </div>
        <!-- 轮播图控制按钮 -->
        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>
    </div>
        <div class="hot-recommendation">
        <h2>   热   门   信   息   推   荐   </h2>
        <ul>
            <li><a href="/article/1/read/">《鬼灭之刃》新季预告发布</a></li>
            <li><a href="/article/1/read/">《原神》角色更新引热议</a></li>
            <li><a href="/article/1/read/">《进击的巨人》完结篇预告</a></li>
            <li><a href="/article/1/read/">《火影忍者》20周年庆典</a></li>
            <li><a href="/article/1/read/">《全职高手》杭州线下会展</a></li>
            <li><a href="/article/1/read/">《刀剑神域》剧场版首映</a></li>
        </ul>
    </div>
    </div>
{% endblock %}
{% block js%}
    <script type="text/javascript" src="{% static '/js/lbt.js' %}"></script>
{% endblock %}
